<template>
  <t-form ref="form" :class="['item-container', `register-${type}`]" :data="formData" :rules="FORM_RULES"
    label-width="0" @submit="onSubmit">
    <template v-if="type == 'phone'">
      <t-form-item name="phone">
        <t-input v-model="formData.phone" :maxlength="11" size="large" placeholder="请输入您的手机号">
          <template #prefix-icon>
            <t-icon name="mobile" />
          </template>
        </t-input>
      </t-form-item>
    </template>

    <t-form-item name="password">
      <t-input v-model="formData.password" size="large" :type="showPsw ? 'text' : 'password'" clearable
        placeholder="请输入登录密码">
        <template #prefix-icon>
          <t-icon name="lock-on" />
        </template>
        <template #suffix-icon>
          <t-icon :name="showPsw ? 'browse' : 'browse-off'" @click="showPsw = !showPsw" />
        </template>
      </t-input>
    </t-form-item>

    <t-form-item name="hospital">
      <t-input v-model="formData.hospital" size="large" type="text" clearable placeholder="请输入所属医院">
        <template #prefix-icon>
          <t-icon name="layers" />
        </template>
      </t-input>
    </t-form-item>

    <t-form-item name="name">
      <t-input v-model="formData.name" size="large" type="text" clearable placeholder="请输入姓名">
        <template #prefix-icon>
          <t-icon name="user" />
        </template>
      </t-input>
    </t-form-item>

    <template v-if="type == 'phone'">
      <t-form-item class="verification-code" name="verifyCode">
        <t-input v-model="formData.verifyCode" size="large" placeholder="请输入验证码" />
        <t-button variant="outline" :disabled="countDown > 0" @click="sendVeri">
          {{ countDown == 0 ? '发送验证码' : `${countDown}秒后可重发` }}
        </t-button>
      </t-form-item>
    </template>

    <t-form-item class="check-container" name="checked">
      <t-checkbox v-model="formData.checked">我已阅读并同意 </t-checkbox> <span>OVCF患者管理系统服务协议</span> 和
      <span>OVCF患者管理系统 隐私声明</span>
    </t-form-item>

    <t-form-item>
      <t-button block size="large" type="submit"> 注册 </t-button>
    </t-form-item>
  </t-form>
</template>
<script lang="ts">
  import Vue from 'vue';

  const INITIAL_DATA = {
    phone: '',
    email: '',
    password: '',
    verifyCode: '',
    checked: false,
    hospital: '',
    name: ''
  };

  const FORM_RULES = {
    phone: [{
      required: true,
      message: '手机号必填',
      type: 'error'
    }],
    email: [{
      required: true,
      email: true,
      message: '邮箱必填',
      type: 'error'
    }],
    password: [{
      required: true,
      message: '密码必填',
      type: 'error'
    }],
    verifyCode: [{
      required: true,
      message: '验证码必填',
      type: 'error'
    }],
    name: [{
      requied: true,
      message: "姓名必填",
      type: "error"
    }],
    hospital: [{
      requied: true,
      message: "所属医院必填",
      type: "error"
    }]
  };

  /** 高级详情 */
  export default Vue.extend({
    name: 'Register',
    data() {
      return {
        FORM_RULES,
        type: 'phone',
        emailOptions: [],
        formData: {
          ...INITIAL_DATA
        },
        showPsw: false,
        countDown: 0,
        intervalTimer: null,
      };
    },
    beforeDestroy() {
      clearInterval(this.intervalTimer);
    },
    methods: {
      async sendVeri() {
        if (this.formData.phone == '') {
          this.$message.error("请输入手机号！")
          return
        }
        if (this.formData.password == '') {
          this.$message.error("请输入密码！")
          return
        }
        await this.$request
          .post('/send-verify?phone=' + this.formData.phone)
          .then(async res => {
            console.log(res);
            if (res.code === 0) {
              this.$message.success('验证码已发送！有效期一小时');
              this.veriCode = res.veriCode;
              this.exceed = new Date(new Date().getTime() + 1 * 60 * 60 * 1000).getTime();
              let me = this;
              me.veriDisable = true;
              me.countDown = 60
              this.intervalTimer = setInterval(() => {
                if (this.countDown > 0) {
                  this.countDown -= 1;
                } else {
                  clearInterval(this.intervalTimer);
                  this.countDown = 0;
                }
              }, 1000);
            } else {
              this.$message.error('发送验证码失败！请稍后再试');
            }
          })
          .catch(e => {
            this.$message.error('发送验证码失败！请稍后再试');
            console.log(e);
          })
          .finally(() => {});
      },
      onSubmit({
        validateResult
      }: {
        validateResult: boolean
      }) {
        if (validateResult === true) {
          if (!this.formData.checked) {
            this.$message.error('请同意服务协议和隐私声明');
            return;
          }
          this.$request.post("/doctor-login?type=regi", this.formData).then(res => {
            console.log(res)
            if (res.code === 0) {

            } else {
              this.$message.error("res.info")
            }
          }).catch(e => {
            console.log(e);
            this.$message.error("错误！")
          })
          this.$message.success('注册成功');
          this.$emit('registerSuccess');
        }
      },
    },
  });
</script>
